<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>Crossing-based interface</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/Crossing-based_interface"> <link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Crossing-based_interface rootpage-Crossing-based_interface skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Crossing-based interface</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr">
<p><b>Crossing-based interfaces</b> are <a href="Graphical_user_interface" title="Graphical user interface">graphical user interfaces</a> that use crossing gestures instead of, or in complement to, <a href="Point-and-click" class="mw-redirect" title="Point-and-click">pointing</a>. Where a pointing task involves moving a cursor inside a graphical object and pressing a button, a goal-crossing task involves moving a cursor beyond a boundary of a targeted graphical object to trigger an effect.
</p>
<meta property="mw:PageProp/toc">
<div class="mw-heading mw-heading2"><h2 id="Goal-crossing_tasks">Goal-crossing tasks</h2></div>
<p>Goal crossing has been little investigated, despite sometimes being used on today's interfaces (e.g., mouse-over effects, hierarchical menus navigation, auto-retractable taskbars and <a href="Cursor_hotspot" class="mw-redirect" title="Cursor hotspot">hot corners</a>). Still, several advantages of crossing over pointing have been identified:
</p>
<ul><li>Elongated objects such as <a href="Hyperlinks" class="mw-redirect" title="Hyperlinks">hyperlinks</a> are faster to cross than to point.</li>
<li>Several objects can be crossed at the same time within the same <a href="Mouse_gesture" class="mw-redirect" title="Mouse gesture">gesture</a>.</li>
<li>Crossing allows triggering actions when buttons are not available (e.g., while an object is being <a href="Drag-and-drop" class="mw-redirect" title="Drag-and-drop">dragged</a>).</li>
<li>Crossing-based <a href="GUI_widget" class="mw-redirect" title="GUI widget">widgets</a> can be designed to be more compact than pointing-based ones. This may be useful for small display devices.</li>
<li>Goal crossing is particularly natural on <a href="Stylus_(computing)" title="Stylus (computing)">stylus</a>-based devices. On these devices, crossing an object back and forth is easier than <a href="Double-clicking" class="mw-redirect" title="Double-clicking">double-clicking</a>.</li>
<li>Crossing can be a good alternative for users who have difficulties with clicking or double-clicking.</li></ul>
<p>There are several other ways of triggering actions in user interfaces, either graphic (<a href="Mouse_gesture" class="mw-redirect" title="Mouse gesture">gestures</a>) and non-graphic (<a href="Keyboard_shortcuts" class="mw-redirect" title="Keyboard shortcuts">keyboard shortcuts</a>, <a href="Speech_recognition" title="Speech recognition">speech commands</a>).
</p>
<div class="mw-heading mw-heading2"><h2 id="Laws_of_crossing">Laws of crossing</h2></div>
<p>Variants of <a href="Fitts'_law" class="mw-redirect" title="Fitts' law">Fitts' law</a> have been described for goal-crossing tasks (Accot and Zhai 2002). Fitts' law is seen as a <i>Law of pointing</i>, describing variability in the direction of the pointer's movement. The <i>Law of crossing</i> describes the allowed variability in the direction perpendicular to movement, and the <a href="Steering_law" title="Steering law">steering law</a> describes movement along a tunnel.
</p>
<div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div>
<ul><li><a href="Fitts_Law" class="mw-redirect" title="Fitts Law">Fitts Law</a> — A principle of human movement which predicts the time required to move from a starting position to a final target area.</li>
<li><a href="Accot-Zhai_steering_law" class="mw-redirect" title="Accot-Zhai steering law">Accot-Zhai steering law</a> — An extension of Fitt's law to <i>steering</i> tasks.</li>
<li><a href="Interaction_technique" title="Interaction technique">Interaction technique</a></li>
<li><a href="Pie_menu" title="Pie menu">Pie menu</a></li>
<li><a href="Pull-to-refresh" title="Pull-to-refresh">Pull-to-refresh</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<ul><li>Original work
<ul><li>Accot, J. and Zhai, S. (2002). More than dotting the i's - foundations for crossing-based interfaces, in Proc. of CHI'2002: ACM Conference on Human Factors in Computing Systems, Minneapolis, Minnesota, April 2002. pp 73–80.</li></ul></li>
<li>Selected subsequent work
<ul><li>Apitz, G. and Guimbretière F. (2004). CrossY: a crossing-based drawing application. In Proceedings of the 17th Annual ACM Symposium on User interface Software and Technology (Santa Fe, NM, USA, October 24–27, 2004). UIST '04. ACM Press, New York, NY, 3-12.</li>
<li>Dragicevic, P. (2004). Combining crossing-based and paper-based interaction paradigms for dragging and dropping between overlapping windows. In Proceedings of the 17th Annual ACM Symposium on User interface Software and Technology (Santa Fe, NM, USA, October 24–27, 2004). UIST '04. ACM Press, New York, NY, 193-196.</li></ul></li></ul>
<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>
<ul><li><a rel="nofollow" class="external text" href="http://www.almaden.ibm.com/u/zhai/topics/LawsOfAction.htm">Laws of Action</a> by Shumin Zhai</li>
<li><a rel="nofollow" class="external text" href="http://www.cs.umd.edu/hcil/crossy/">CrossY</a> interface by Apitz and Guimbretière</li>
<li><a rel="nofollow" class="external text" href="http://www.dgp.toronto.edu/~dragice/foldndrop/">Dragicevic's Fold'n'Drop technique</a></li>
<li><a rel="nofollow" class="external text" href="http://www.dontclick.it/">Don't Click It</a> - A clickless proof-of-concept interface</li></ul></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2022-05-10" href="https://en.wikipedia.org/wiki/?title=Crossing-based_interface&oldid=1087139127">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
</body></html>